<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
    
<!DOCTYPE html>
<html>
<head>
	<title>All Products</title>
	<base href="products/" />
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
	<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>

<script>
function redrawShoppingCart(response){
	$('#shoppingCartId').html(response);
}

function redrawAllProductsTable(response){
	$('#allProductsTableId').html(response);
}

function renewPage(sort) {
	var url = window.location.pathname + "?page=0" + "&size=" + ${page.size} + "&sort=" + sort + ",ASC";
    $.get(url, redrawAllProductsTable);
}

function addToCart(productId) {
	var url = window.location.pathname + "/addToCart?product=" + productId;
    $.get(url, redrawShoppingCart);
}

function deleteFromCart(productId) {
	var url = window.location.pathname + "/deleteFromCart?product=" + productId;
    $.get(url, redrawShoppingCart);
}
</script>

<body>
<div class="container">
 	<div class="row">
		<div class="col-md-7" id="allProductsTableId">
			<fieldset>
				<legend>Product Details</legend>
				<table class="table table-striped">
					<tr>
						<th class="col-md-1"><a onclick="renewPage('<%="id"%>')">ID</a></th>
						<th class="col-md-5"><a onclick="renewPage('<%="name"%>')">NAME</a></th>
						<th class="col-md-2"><a onclick="renewPage('<%="price"%>')"><fmt:message key='price'/></a></th>
						<th class="col-md-2"></th>
					</tr>
					<c:forEach items="${page.content}" var="product">
						<tr>
							<td>${product.id}</td>
							<td>${product.name}</td>
							<td>${product.price}</td>
							<td>
								<a class="btn btn-xs btn-success" onclick="addToCart(${product.id})">
									<span class="glyphicon glyphicon-shopping-cart"></span>
									Add To Cart
								</a>
							</td>
						</tr>
					</c:forEach>
				</table>
			</fieldset>
			
			<jsp:include page="util/pagination.jsp">
				<jsp:param name="page" value="${page}"/>
			</jsp:include>
		</div>
		
		<div class="col-md-3" id="shoppingCartId">
			<c:if test="${order.productSize != 0}">
				<jsp:include page="shoppingCart.jsp"/>
			</c:if>
		</div>
		
	</div>
</div>

</body>
</html>